import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

//静态路由配置
void main() => runApp(const MyApp3());

//定义根目录Widget
class MyApp3 extends StatelessWidget {
  const MyApp3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        //初始化默认的 Material 组件本地化
        GlobalMaterialLocalizations.delegate,
        //初始化默认的 通用 Widget 组件本地化
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      //当前区域，如果为null则使用系统区域一般用于语言切换
      //传入两个参数，语言代码，国家代码
      //这里配制为中国
      locale: const Locale('zh', 'CN'),
      //定义当前应用程序所支持的语言环境
      supportedLocales: const [
        Locale('en', 'US'), // English 英文
        Locale('zh', 'CN'), // 中文
      ],
      routes: {
        //默认页面
        "/": (BuildContext context) => const Exam211HomePage(),
      },
    );
  }
}

///代码清单2-16 Scaffold中 BottomAppBar 底部导航栏
///代码路径 lib/code2/code211_Scaffold_BottomAppBar.dart
class Exam211HomePage extends StatefulWidget {
  const Exam211HomePage({Key? key}) : super(key: key);
  @override
  State<Exam211HomePage> createState() => _Exam211HomePageState();
}

class _Exam211HomePageState extends State<Exam211HomePage>
    with SingleTickerProviderStateMixin {
  //底部导航栏使用数据
  List<Tab> tabWidgetlist = [
    const Tab(text: "首页", icon: Icon(Icons.home)),
    const Tab(text: "消息", icon: Icon(Icons.message)),
    const Tab(text: "我的", icon: Icon(Icons.people)),
  ];
  ///子页面
  List<Widget> bodyWidgetList = [
    ItemPage(0),
    ItemPage(1),
    ItemPage(2),
  ];

  //创建控制器 late 关键字声明 非null
  late TabController _tabController;

  @override
  void initState() {
    super.initState();

    ///创建控制器
    _tabController = TabController(
        //初始化显示的页面
        initialIndex: 0,
        //页面个数
        length: 3,
        vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold 用来搭建页面的主体结构
    return Scaffold(
      //页面的头部
      appBar: AppBar(title: const Text("标题")),
      //页面的主内容区
      //可以结合 TabBarView PageView 来实现标签面的切换
      body: TabBarView(
        controller: _tabController,
        children: bodyWidgetList,
      ),
      bottomNavigationBar: buildBottomAppBar(),
    );
  }

  ///代码清单2-16 01 Scaffold中 BottomAppBar 底部导航栏
  ///代码路径 lib/code2/code211_Scaffold_BottomAppBar.dart
  BottomAppBar buildBottomAppBar() {
    //创建一个 BottomAppBar
    return BottomAppBar(
      child: Theme(
        data: ThemeData(
          //点击的高亮颜色
          highlightColor: Colors.blueGrey[600],
          //水波纹颜色
          splashColor: Colors.grey,
        ),
        //用来配置 TabBar 的背景颜色
        child: Material(
          color: Colors.grey[300],
          child: TabBar(
            labelColor: Colors.blue,//选中的 Tab 图标与文字的颜色
            //其他未选中的Tab 图标与文字的颜色
            unselectedLabelColor: Colors.blueGrey,
            tabs: tabWidgetlist, //所有的Tab
            controller: _tabController,//联动控制器
            //下划线的颜色
            indicatorColor: Colors.grey[300],
            //下划线的高度
            indicatorWeight: 1.0,
          ),
        ),
      ),
    );
  }
}

class ItemPage extends StatelessWidget {
  int index = 0;

  ItemPage(this.index, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(child: Text("$index"));
  }
}

